import React, { useState, useEffect } from "react";
import { Alert, Space, Spin } from "antd";
import { useNavigate } from "react-router-dom";
import next from "../image/images/next.png";
import pnpm from "../image/images/pnpm.png";
import xia from "../image/images/xia.png";
import shu from "../image/images/shu.png";
import spring from "../image/images/spring.png";
import mysql from "../image/images/mysql.png";
import { getList, serlist } from "../api/index";
import QueueAnim from 'rc-queue-anim';
type Props = {};

const Tui = (props: Props) => {
  const navigate = useNavigate();
  const [arr, setArr] = useState(true);
  const [list,setList]=useState([])
  useEffect(()=>{
setTimeout(() => {
    setArr(false);
  }, 3000);
  },[])
  useEffect(()=>{
    getList().then((res:any)=>{
      setList(res.data.data)
    })
  },[])
  return (
    <div className="read">
      {arr ? (
        <Spin tip="Loading" size="small" className="read_son">
          <div className="content" />
        </Spin>
      ) : (
        <div>
           <QueueAnim delay={100} type={['right', 'left']} interval={100} className="queue-simple">
          {
            list && list.map((item:any,index:number)=>{
              return <p key={index} onClick={()=>navigate("/home/Details/"+item.id, { state: item })}>
                {item.title}
              </p>
            },
            )}
            </QueueAnim>
            {/* {
              list && list.map((item:any,index:number)=>{
                  return <p key={index} onClick={()=>{
                    console.log(item);
                    
                      setArr(true)
                      setTimeout(() => {
                          setArr(false);
                        }, 3000);
                        navigate('/home/Details',{state:item})
                  }}>
                      {item.title}
                  </p>
              })
            } */}
        </div>
        
      )}
    </div>
  );
  
};

export default Tui;
